<template>
    <h1>出生年份 --- {{ year }}; 年龄 --- {{ age }}</h1>
    <button @click="setYear">修改出生年份</button>
    <button @click="setAge">修改年龄</button>
</template>

<script>
export default {
    data() {
        return {
            year: 2005,
        };
    },
    methods: {
        setYear() {
            this.year = 2006;
        },
        setAge() {
            this.age = 20;
        },
    },
    computed: {
        /**
         *  计算属性:
         *      需要书写在 computed 配置项中, 书写的时候类似 methods 中的 方法
         *      但是使用的时候直接使用即可, 不要加小括号, 也不能加小括号
         *
         *      一般计算属性不需要被修改, 也尽量不要修改, 但是如果必须修改计算属性, 那么需要将计算属性书写为一个对象
         *      内部包含 一个get函数和一个set函数
         *
         *      计算属性会在页面一打开的时候立即执行一次(如果使用到了才会!!!)
         *      后续的重新执行取决于内部依赖的响应式数据有没有发生变化
         *
         *      内部可以书写一个或者多个响应式数据, 只要有一个发生变化就会立即重新执行计算属性
         *      也就是说多个响应式数据可能会影响一个值, 属于 多对一的关系
         */

        // 将下边的计算属性更改为 可修改的计算属性
        age: {
            get() {
                return 2023 - this.year;
            },
            set(val) {
                this.year = 2023 - val;
            },
        },

        // 计算属性本身在绝大部分场景下不需要更改, 但是如果需要更改, 那么需要更换写法
        // age () {
        //     return 2023 - this.year
        // }
    },
};
</script>

<style></style>
